<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.wrapper{
			display: flex; /* 设置为弹性布局 */
			margin: 50px auto; /* 设置上下边距为50px，左右自动居中 */
			width: 400px; /* 设置宽度为400px */
			overflow: hidden; /* 控制内容溢出时的显示方式 */
			border-radius: 8px; /* 设置圆角边框 */
			padding: 15px; /* 设置内边距为15px */
			box-shadow: 
				10px 10px 30px #bebebe, /* 添加阴影效果 */
				-10px -10px 30px #ffffff;
		}
		
		.text{
			font-size: 20px; /* 设置字体大小为20px */
			overflow: hidden; /* 控制内容溢出时的显示方式 */
			text-overflow: ellipsis; /* 超出长度时使用省略号代替 */
			text-align: justify; /* 设置内容两端对齐 */
			display: -webkit-box; /* 设置为弹性盒子 */
			-webkit-line-clamp: 3; /* 控制最多显示的行数为3行 */
			-webkit-box-orient:vertical; /* 设置盒子的排列方式为垂直 */
			position: relative; /* 设置相对定位 */
		}
		
		.exp{
			display:none; /* 设置初始状态为隐藏 */
		}
		
		.btn{
			margin-left: 10px; /* 设置左边距为10px */
			font-size: 16px; /* 设置字体大小为16px */
			padding: 0 8px; /* 设置内边距为0 8px */
			background: #3f51b5; /* 设置背景颜色为#3f51b5 */
			line-height: 24px; /* 设置行高为24px */
			border-radius: 4px; /* 设置圆角边框 */
			color: #fff; /* 设置字体颜色为白色 */
			cursor:pointer; /* 设置鼠标样式为手指 */
		}
		
		.btn::before{
			content: '展开'; /* 设置伪元素的内容为展开 */
		}
		
		.exp:checked + .text .btn::before{
			content: '收起'; /* 当.exp被选中时，设置伪元素的内容为收起 */
		}
		
		.btn{
			float:right; /* 设置浮动在右侧 */
			clear: both; /* 清除浮动，让按钮下移 */
		}
		
		.text::before{
			content: ''; /* 设置伪元素的内容为空 */
			height: calc(100% - 24px); /* 设置高度为内容区域高度减去按钮高度 */
			float:right; /* 设置浮动在右侧 */
		}
		
		.text{
			-webkit-line-clamp: 4; /* 控制最多显示的行数为4行 */
		}
		
		.exp:checked + .text{
			-webkit-line-clamp: 999; /* 当.exp被选中时，显示所有行 */
		}
		
		.text::after{
			
			content: :''; /* 设置伪元素的内容为空 */
			width: 999vw; /* 设置宽度为999vw */
			height: 999vw; /* 设置高度为999vw */
			position: absolute; /* 设置绝对定位 */
			box-shadow: 
			  inset calc(100px - 999vw)
				calc(30px - 999vw) 0 0 #000; /* 设置阴影效果 */
			margin-left: -100px; /* 设置左外边距为-100px */
		}
		
		.exp:checked + .text::after{
			visibility: hidden; /* 当.exp被选中时，隐藏伪元素 */
		}
	</style>
	<body>
		<div class="wrapper">
			<input id="exp1" class="exp" type="checkbox"/>
			<div class="text">
				<label class="btn" for="exp1"></label>
				这里是一段很长的文字，这里是一段很长的文字，这里是一段很长的文字
				这里是一段很长的文字，这里是一段很长的文字，这里是一段很长的文字
				这里是一段很长的文字，这里是一段很长的文字，这里是一段很长的文字
				这里是一段很长的文字，这里是一段很长的文字，这里是一段很长的文字
				这里是一段很长的文字，这里是一段很长的文字，这里是一段很长的文字
				这里是一段很长的文字，这里是一段很长的文字，这里是一段很长的文字
			</div>
		</div>
	</body>
</html>